<template>
  <div>
    <h2>{{ $store.state.count }}</h2>
    <button @click="addCount(3)">count++</button>
    <h2>{{ $store.getters.reverseMsg }}</h2>
    <h3>{{ $store.getters.reverseMsgLength }}</h3>
    <h2>{{ count }}</h2>
    <h2>{{msg}}</h2>
    <h2>{{addNum}}</h2>
    <h2>{{reverseMsg}}</h2>
    <!-- 用户模块 -->
    <h2>{{$store.getters.userNameAge}}</h2>
    <h1>{{$store.state.a.userName}}</h1>

    <button @click="changeName">改变名字</button>
  </div>
</template>

<script>

import { mapState,mapMutations,mapActions,mapGetters } from "vuex";
export default {
  data(){
    return {
      num:10,
    }
  },
  methods: {
    addCount(num) {
      // this.$store.commit("increment", num);
      this.increment(num)
    },
    changeName(){
      this.$store.commit('updateUsername')
    },
    ...mapMutations(['increment']),
    ...mapActions(['getHot'])
  },
  // computed: mapState({
  //   // count: state =>state.count
  //   count:"count"
  // }),
  // computed: mapState(["count", "msg"]),
  computed:{
    addNum:function(){
      return this.num*10
    },
    ...mapState(["count", "msg"]),//扩展运算符
    ...mapGetters(['reverseMsg'])

  },
  mounted() {
    // this.$store.dispatch("getHot", "hhh");
  this.getHot()
  // console.log(this.count);
  // console.log(this.msg);
  console.log(this.$store);
  },
};
</script>
